<!-- @chenqin
<map-init mapId="map" :positionPicker="false" :lng="lng" :lat="lat" :isinitmap="isinitmap" mapHeight="500px" scale="10" @mapOk="mapOk"></map-init>
-->
<template>
<div class="map-zoom map-picker-input">
    <div :id='mapId' class="map" tabindex="0"  :style="{'min-height':mapHeight}"></div>
    <div id="pickerBoxs" v-if="poiPicker">
        <input placeholder="请输入地址搜索..." :id="inputId" class="pickerInput"/>
        <div id="poiInfo"></div>
    </div>

</div>
</template>

<script>
import { lazyAMapApiLoaderInstance } from 'vue-amap';
export default {
    props: {
        isinitmap: {
            type: Boolean
        },
        copyAddress: {
            type: String,
            default: ''
        },
        mapHeight: {
            type: Number | String,
            default: '400px'
        },
        lat: {
            type: Number | String
        },
        lng: {
            type: Number | String
        },
        scale: {
            type: Number | String
        },
        inputId: {
            type: String
        },
        mapId: {
            type: String
        },
        lonLng: {
            type: Array,
            default: ()=>{
                return []
            }
        },
        areaList: {
            type: Array,
            default: ()=>{
                return []
            }
        },
        markerPicker: {
            type: Boolean,
            default: false,
        },
        positionPicker: {
            type: Boolean,
            default: true,
        },
        //是否搜索定点
        poiPicker: {
            type: Boolean,
            default: false,
        },
        //自定义地图
        mapStyle: {
            type: String,
        }
    },
    data () {
        return {
            map: null,
            location: null,
            inputValue: '',
            poiPickers: null
        };
    },
    watch: {
        copyAddress: function(val, old) {
            this.poiPickers.searchByKeyword(this.copyAddress);
        },
        isinitmap: function (val, old) {
            if (this.map) {
                if (
                    typeof this.lng !== 'undefined' && this.lat !== null &&
                    typeof this.lat !== 'undefined' && this.lat !== null &&
                    Number(this.lng) !== 0 && Number(this.lat) !== 0
                ) {
                    this.map.setCenter(new AMap.LngLat(this.lng, this.lat));
                }else{
                    this.map.setCenter(new AMap.LngLat(116.397428, 39.90923));
                }
            }
        }
    },
    mounted () {
        this.initMap();
    },
    methods: {
        // 实例化地图
        initMap () {
            const self = this;
            lazyAMapApiLoaderInstance.load().then(() => {
                let center = [];
                center[0] = self.lng ? self.lng : JSON.parse(localStorage.getItem('lnglat'))[0];
                center[1] = self.lat ? self.lat : JSON.parse(localStorage.getItem('lnglat'))[1];
                let mapOption = {
                    zoom: parseInt(this.scale),
                    center: center
                };
                if(self.mapStyle){
                    mapOption.mapStyle = self.mapStyle;
                }
                self.map = new AMap.Map(self.mapId, mapOption);

                const _map = self.map;
                let zoomCenter;
                _map.on('zoomstart', function (e) {
                    zoomCenter = _map.getCenter();
                });
                _map.on('zoomend', function (e) {
                    _map.setCenter(zoomCenter);
                });
                self.$emit('mapOk',_map);

                // 绘制区域
                self.areaList.forEach((item,index)=>{
                    let path = JSON.parse(item.area);
                    _map.add(new AMap.Polygon({
                        path: path,
                        strokeColor: 'blue',
                        strokeWeight: 2,
                        strokeOpacity: 1,
                        fillOpacity: 0,
                        fillColor: '#fff',
                        zIndex: 50,
                    }));
                });
                // 缩放地图到合适的视野级别
                // _map.setFitView([ polygon ]);
                //绘制区域
                // let styleName = "amap://styles/whitesmoke";
                // _map.setMapStyle(styleName);
                // 缩放控件
                AMapUI.loadUI(['control/BasicControl'], function(BasicControl) {
                    _map.addControl(new BasicControl.Zoom({
                        position: 'br',
                        showZoomNum: true
                    }));
                });
                // 缩放控件
                if(self.poiPicker){
                    AMapUI.loadUI(['misc/PoiPicker'], function(PoiPicker) {
                        self.poiPickers = new PoiPicker({
                            //city: '北京',
                            input: self.inputId
                        });
                        self.poiPickers.on('poiPicked', function (poiResult) {
                            _map.setCenter(poiResult.item.location);
                        });

                    });
                }
                if(self.positionPicker){
                    AMapUI.loadUI(['misc/PositionPicker'],function(PositionPicker){
                        var positionPicker = new PositionPicker({
                            mode: 'dragMap',
                            map: _map
                        });

                        positionPicker.on('success', function (positionResult){
                            mapOption.zoom = 14;
                            self.$emit('positionPickerOk', positionResult, self.map);
                        });

                        positionPicker.on('fail', function (positionResult) {});
                        positionPicker.start();
                    })
                }
                if(self.markerPicker){
                    AMapUI.loadUI(['overlay/SimpleMarker'], function(SimpleMarker) {
                        let iconTheme = 'default';
                        //内置的样式
                        let iconStyles = SimpleMarker.getBuiltInIconStyles(iconTheme);
                        // let lngLats = [[116.3365510,39.9421310],[116.4092010,40.0187590]];
                        let lngLats = self.lonLng;
                        for (let i = 0, len = lngLats.length; i < len; i++) {
                            new SimpleMarker({
                                iconTheme: iconTheme,
                                //使用内置的iconStyle
                                iconStyle: iconStyles[0],
                                //图标文字
                                iconLabel: {
                                    //A,B,C.....
                                    innerHTML: '百',
                                    style: {
                                        //颜色, #333, red等等，这里仅作示例，取iconStyle中首尾相对的颜色
                                        color: '#fff'
                                    }
                                },
                                map: _map,
                                position: lngLats[0],
                            });
                            new SimpleMarker({
                                iconTheme: iconTheme,
                                //使用内置的iconStyle
                                iconStyle: iconStyles[1],
                                //图标文字
                                iconLabel: {
                                    //A,B,C.....
                                    innerHTML: '高',
                                    style: {
                                        //颜色, #333, red等等，这里仅作示例，取iconStyle中首尾相对的颜色
                                        color: '#fff'
                                    }
                                },
                                map: _map,
                                position: lngLats[1],
                            });
                        }
                    });
                }

            });
        },
    }
};
</script>
<style lang="less">
    .map-picker-input{
        .amap-ui-poi-picker-sugg-list .sugg-item{
            font-size: 12px;
            /*padding: 0px 5px 0px 23px;*/
        }
    }

</style>
<style lang="less" scoped>
    /*@import url(./map.less);*/
    #pickerBoxs {
        position: absolute;
        z-index: 9999;
        top: 10px;
        left: 10px;
        width: 300px;
    }

    .pickerInput {
        /*display: inline-block;*/
        width: 360px;
        margin: 0 auto 20px;
        font-size: 12px;
        /*height: 24px;*/
        line-height: 1.5;
        padding: 4px 7px;
        /*font-size: 14px;*/
        border: 1px solid #dddee1;
        border-radius: 4px;
        /*color: #495060;*/
        /*background-color: #fff;*/
        background-image: none;
        position: relative;
        /*cursor: text;*/
        /*transition: border .2s ease-in-out,background .2s ease-in-out,box-shadow .2s ease-in-out;*/
    }

    .input-map{
        width: 300px;
        height: 30px;
        padding-left: 6px;
        border: 1px solid #ccc;
        border-radius: 4px;
    }
    #poiInfo {
        background: #fff;
    }

    .amap_lib_placeSearch .poibox.highlight {
        background-color: #CAE1FF;
    }

    .amap_lib_placeSearch .poi-more {
        display: none!important;
    }

</style>
